import React, { useState } from "react";
import {
  Avatar,
  List,
  Text,
  Box,
  Page,
  Button,
  Icon,
  Header,
  useNavigate,
  Input,
} from "zmp-ui";
import { useRecoilValue } from "recoil";
import { displayNameState, userState } from "state";
import { getConfig } from "utils/config";
import logo from "static/logo.png";
import ArrowLeft from "static/icon/icon-arrow-fill.svg";
import IconMenu from "static/icon/icon-menu.svg";
import styles from "./index.module.scss";
import NumStep from "components/NumStep";
import ShopCart from "components/ShopCart";
import Overly from "components/Overly";
import GoodsItem from "./components/GoodsItem";
const MenuPage = () => {
  // const { userInfo: user } = useRecoilValue(userState);
  // const displayName = useRecoilValue(displayNameState);
  // const navigate = useNavigate();
  const [typeTags, setTypeTags] = useState([1, 2, 3, 4]);
  const [activeTag, setActiveTag] = useState(undefined);
  const [goodsList, setGoodsList] = useState([1, 2, 3, 4, 5, 6]);
  const selectTypeTag = (index: number) => {
    setActiveTag(index);
  };
  return (
    <Page className="page text-color-1">
      <Header
        showBackIcon={false}
        className="app-header no-border pl-4 flex-none pb-[6px] rounded-br-xl rounded-bl-xl z-20"
        title={
          (
            <>
              <Box className={styles["search-wrapper"]}>
                <Input.Search placeholder="关键词搜索" />
              </Box>
              <Box className={styles["store-name-location"]}>
                <Box flex alignItems="center" mb={2}>
                  <Text.Title size="small">店铺名称</Text.Title>
                  <img src={ArrowLeft} className="w-4 ml-1" />
                </Box>
                <Box flex alignItems="center" justifyContent="space-between">
                  <Box flex alignItems="center">
                    <Icon icon="zi-location" size={18} />
                    <span className={styles["title-3"]}>定位未开启</span>
                    <Icon icon="zi-chevron-right" />
                  </Box>
                  <Box flex>
                    <span className={styles["title-3"]}>门店信息</span>
                    <Icon icon="zi-chevron-down" />
                  </Box>
                </Box>
              </Box>
            </>
          ) as unknown as string
        }
      />
      <Box className="bg-white rounded-tl-xl rounded-tr-xl" mt={3}>
        <div className={styles["type-menu-tags-wrapper"]}>
          <div className={styles["left-icon"]}>
            <img src={IconMenu} />
          </div>
          {typeTags.map((item, idx) => (
            <div
              key={idx}
              className={`${styles["type-menu-tag"]} ${
                idx === activeTag ? styles["active-tag"] : ""
              }`}
              onClick={() => selectTypeTag(idx)}
            >
              <img src="" className={styles["tag-icon"]} />
              <span className={styles["tag-text"]}>咖啡茶饮</span>
            </div>
          ))}
        </div>
      </Box>
      <Box className="bg-white" px={4} pt={4} pb={25}>
        {goodsList.map((item, idx) => (
          <GoodsItem />
        ))}
      </Box>
      <Box>
        <ShopCart />
      </Box>
    </Page>
  );
};

export default MenuPage;
